<template>
  <div class="online-devices">
    <el-table v-loading="loading" :data="devices" border style="width: 100%" size="small">
      <el-table-column prop="platform" label="登录平台" min-width="100" />
      <el-table-column prop="username" label="登录账号" min-width="120" />
      <el-table-column prop="displayName" label="显示名称" min-width="120" />
      <el-table-column prop="ipAddr" label="IP地址" min-width="130" />
      <el-table-column prop="location" label="登录地址" min-width="120" />
      <el-table-column prop="browser" label="浏览器" min-width="120" />
      <el-table-column prop="platform" label="系统" min-width="100" />
      <el-table-column prop="operateTime" label="登录时间" min-width="150" />
      <el-table-column label="操作" width="100" fixed="right">
        <template #default="scope">
          <el-button type="danger" size="small" @click="forceLogout(scope.row)">下线</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="queryParams.pageNum"
        v-model:page-size="queryParams.pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        small
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { list, forceLogout as apiForceLogout } from '@/api/monitor/online'
import modal from '@/plugins/modal'

const devices = ref([])
const total = ref(0)

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10
})

const loading = ref(true)

// 获取在线设备列表
function getDevices() {
  loading.value = true
  list(queryParams).then((response: any) => {
    devices.value = response.data.records
    total.value = response.data.total
    loading.value = false
  })
}

// 强制下线
function forceLogout(row: any) {
  modal.confirm('是否确认强制"' + row.username + '"下线?').then(() => {
    return apiForceLogout(row.sessionId)
  }).then(() => {
    getDevices()
    modal.msgSuccess('下线成功')
  }).catch(() => {})
}

function handleSizeChange(val: number) {
  queryParams.pageSize = val
  getDevices()
}

function handleCurrentChange(val: number) {
  queryParams.pageNum = val
  getDevices()
}

onMounted(() => {
  getDevices()
})
</script>

<style scoped>
.online-devices {
  padding: 10px;
}

.pagination-container {
  padding: 10px 0;
  text-align: right;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
}

:deep(.el-table .cell) {
  padding: 0 5px;
}

:deep(.el-button--small) {
  padding: 6px 10px;
}
</style>